<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/10/20 0020
  Time: 10:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>车辆信息管理--列表页</title>
    <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
    <link href="/static/plugins/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="/static/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
    <link rel="stylesheet" href="/static/css/carcom.css">
    <style>
        .serach{
            border-bottom: 1px solid #cccccc ;
            padding-top: 1%;
            padding-left: 8%;
            padding-bottom: 1%;
            margin-bottom: 1%;
        }
        .serach .searchBox{
            width: 27%;
            float: left;
            margin-left: 5%;
        }
        .layui-form-label{
            width: 32%;
            text-align: center;
        }
        select {
            margin-left: -5px;
            padding: 8px 22px;
            font-size: 15px;
            border: 1px solid #cccccc;
            color: grey;
        }
        .serach .layui-btn{
            margin-left: 2%;
            padding: 0 36px;
        }
    </style>
</head>
<body>
<div class="wrap_padding35">
     <%--面包屑--%>
    <span class="layui-breadcrumb nav">
        <a href="javascript:" class="a1">首页</a>
        <a href="javascript:" class="a2">车辆信息管理</a>
    </span>

        <div class="serach">
            <div class="searchBox" >
                <label class="layui-form-label">车牌号码:</label>
                <div class="layui-input-inline">
                    <input type="text" name="carcode" lay-verify="required" placeholder="请输入车牌号" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="searchBox" >
                <label class="layui-form-label">车辆状态:</label>
                <div class="layui-input-block">
                    <select name="carstate">
                        <option value="" selected id="select">-- 全 部 --</option>
                        <option value="0">待租赁</option>
                        <option value="1">待审核</option>
                        <option value="2">不合格</option>
                        <option value="3">已报废</option>
                        <option value="4">已删除</option>
                        <option value="5">待上架</option>
                        <option value="6">租赁中</option>
                        <option value="7">自用中</option>
                        <option value="8">维修中</option>
                        <option value="9">保养中</option>
                        <option value="10">年检中</option>
                    </select>
                </div>
            </div>

            <button class="layui-btn layui-btn-lg layui-btn-normal" id="btn_search">搜索</button>
            <button class="layui-btn layui-btn-primary" id="btn_res">重置</button>
        </div>


    <%-- 按钮组 --%>
    <div class="layui-btn-group" id="toolbar">

        <button class="layui-btn layui-btn-primary" id="btn_add">
            <i class="layui-icon">&#xe654;</i>新增
        </button>
        <button class="layui-btn layui-btn-primary" id="btn_edit">
            <i class="layui-icon">&#xe642;</i>编辑
        </button>
        <button class="layui-btn layui-btn-primary" id="btn_delete">
            <i class="layui-icon">&#xe640;</i>删除
        </button>

    </div>
    <table id="tb_cars"></table>
</div>
<%--1、引入jQuery组件--%>
<script src="/static/plugins/jquery.js"></script>
<script src="/static/plugins/layui/layui.js"></script>
<%--2、引入bootstrap组件--%>
<script src="/static/plugins/bootstrap/js/bootstrap.js"></script>
<%--3、bootstrap table组件以及中文包的引用--%>
<script src="/static/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="/static/plugins/bootstrap-table/bootstrap-table-zh-CN.js"></script>
<script>
    layui.use(["element","layer","laydate"],function () {
        var element = layui.element;
        var layer = layui.layer;
        var laydate = layui.laydate;

        $("#tb_cars").bootstrapTable({
            url: '/cars/listData',         //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
//            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: function (data) {
                var params = {
                    offset:data.offset,
                    limit:data.limit
                };
                return params
            },                  // 传递自定义参数,还要加上offset，limit（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 15, 20, 50],        //可供选择的每页的行数（*）
            showRefresh: true,                  //是否显示刷新按钮
            clickToSelect: true,                //是否启用点击选中行
            height: 700,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "carid",                     //每一行的唯一标识，一般为主键列
            columns: [
                {
                    checkbox: true
                }, {
                    field: 'carbrandtype',
                    title: '车型',
                    align:"center"
                }, {
                    field: 'carcode',
                    title: '车牌号码',
                    align:"center"
                }, {
                    field: 'dayprice',
                    title: '日租金',
                    align:"center"
                }, {
                    field: 'deptname',
                    title: '租赁点（门店）',
                    align:"center"
                },{
                    field: 'carcity',
                    title: '所属区域城市',
                    align:"center"
                },{
                    field: 'carstate',
                    title: '状态',
                    align:"center",
                    formatter:function (value, row, index) {
                        var rsVal = " ";
                        switch(value) {
                            case 0 : rsVal = "待租赁";break;
                            case 1 : rsVal = "待审核";break;
                            case 2 : rsVal = "不合格";break;
                            case 3 : rsVal = "已报废";break;
                            case 4 : rsVal = "已删除";break;
                            case 5 : rsVal = "待上架";break;
                            case 6 : rsVal = "租赁中";break;
                            case 7 : rsVal = "自用中";break;
                            case 8 : rsVal = "维修中";break;
                            case 9 : rsVal = "保养中";break;
                            case 10 : rsVal = "年检中";break;
                        }
                        return rsVal;
                    }
                }
            ]
        });

        // 添加
        $("#btn_add").click(function () {
            layer.open({  // iframe层(常用)
                type: 2, // iframe
                area: ["640px","820px"],
                content: "/cars/add",
                title: "车辆信息管理--添加",
                closeBtn:1
            });
        });

        // 编辑
        $("#btn_edit").click(function () {
            var rows = $("#tb_cars").bootstrapTable('getSelections'); // 获取选中行
            if(rows.length < 1){
                layer.msg("请选择一条数据！")
            } else if(rows.length > 1){
                layer.msg("只能选择一条数据！")
            } else {
                var carid = rows[0].carid;
                layer.open({  // iframe层(常用)
                    type: 2, // iframe
                    area: ["640px","820px"],
                    content: "/cars/edit?carid=" + carid,
                    title: "车辆信息管理--编辑",
                    closeBtn:1
                });
            }
        });

        // 搜索
        $("#btn_search").click(function (data) {

            var carcode = $("input[name=carcode]").val();
            var carstate = $("select[name=carstate]").val();

            $("#tb_cars").bootstrapTable("refresh", {
                query: {
                    carcode: carcode,
                    carstate: carstate
                }
            });
        });

        // 重置
        $("#btn_res").click(function () {
            $("input[name=carcode]").val("");
            $("#select").prop("selected",true)
        });

        // 批量删除
        $("#btn_delete").click(function () {
            var rowIds = [];
            var rows = $("#tb_cars").bootstrapTable('getSelections');
            $(rows).each(function () {
                var id = this.carid; // 获取id
                rowIds.push(id);
            });
            var ids = rowIds.join(); // 拼接字符串
            if(ids.length < 1){
                layer.msg("请至少勾选一条数据！")
            } else {
                layer.confirm("确定删除所选数据吗？",function (index) {
                    $.ajax({  // 异步提交
                        url:"/cars/delBatch",
                        type:"post",
                        data:{ids:ids},
                        dataType:"json",
                        success:function (msg) {
                            layer.msg(msg.message);
                            if(msg.code == 1){
                                $("#tb_cars").bootstrapTable("refresh"); // 刷新表格数据
                            }
                        },
                        error:function () {
                            layer.msg("服务器忙，请稍后再试！")
                        }
                    })
                })
            }
        })
    })
</script>
</body>
</html>
